import React, {useState} from 'react';
import { StyleSheet, Text, View, Platform, ScrollView,FlatList } from 'react-native';
import { Button, Carousel } from '@ant-design/react-native'
import MyTest from "@/components/test/MyTest";
import {NewsDataType} from "@/types/test";

type Props ={
    list: Array<NewsDataType>
}

const Test = ({list}:Props) => {
    // const [list,SetNewsList] = useState([])
    const onHorizontalSelectedIndexChange = (e) => {
        console.log(e);
    }
    return (
        <>
            <Text>1234567890</Text>
            <FlatList
                data={list}
                keyExtractor={(_, index) => `list_item${index}`}
                renderItem={({item, index}) => (
                    <MyTest sliderItem={item} index={index}/>
                )}
                horizontal
                showsHorizontalScrollIndicator={false}
                pagingEnabled
            />
            <Carousel
                style={styles.wrapper}
                selectedIndex={2}
                autoplay
                infinite
                afterChange={onHorizontalSelectedIndexChange}
                ref={(ref) => (this.carousel = ref)}>
                <View
                    style={[styles.containerHorizontal, { backgroundColor: 'red' }]}>
                    <Text>Carousel 1</Text>
                </View>
                <View
                    style={[styles.containerHorizontal, { backgroundColor: 'blue' }]}>
                    <Text>Carousel 2</Text>
                </View>
                <View
                    style={[
                        styles.containerHorizontal,
                        { backgroundColor: 'yellow' },
                    ]}>
                    <Text>Carousel 3</Text>
                </View>
                <View
                    style={[styles.containerHorizontal, { backgroundColor: 'aqua' }]}>
                    <Text>Carousel 4</Text>
                </View>
                <View
                    style={[
                        styles.containerHorizontal,
                        { backgroundColor: 'fuchsia' },
                    ]}>
                    <Text>Carousel 5</Text>
                </View>
            </Carousel>
        </>
    )
}

export default Test

const styles = StyleSheet.create({
    wrapper: {
        backgroundColor: '#fff',
        width: '100%',
        height: 150,
    },
    containerHorizontal: {
        flexGrow: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
    containerVertical: {
        flexGrow: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
    text: {
        color: '#fff',
        fontSize: 36,
    },
})